/*第1页，镀铬部件*/
.active .chrome-img{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 1s;
}

.active .chrome-desc{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
/*镀铬光泽效果*/
.active .mask {
    -webkit-animation: maskmove-ant 2s 1 2s ease;
    -moz-animation: maskmove-ant 2s 1 2s ease;
    -ms-animation: maskmove-ant 2s 1 2s ease;
    animation: maskmove-ant 2s 1 2s ease;
}
/*镀铬光泽动画效果*/
@-webkit-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -webkit-transform: translate(333px,230px);
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(3deg) translate(828px,81px);
    }
}
@-moz-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -moz-transform: translate(333px,230px);
    }

    100%{
        opacity: 0;
        -moz-transform: rotate(3deg) translate(828px,81px);
    }
}
@-ms-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -ms-transform: translate(333px,230px);
    }
    100%{
        opacity: 0;
        -ms-transform: rotate(3deg) translate(828px,81px);
    }
}
/*固定第一页*/
.fixed .chrome-img{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 1s;
}
.fixed .chrome-desc{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
/*第2页，烤漆页面*/
.active .paint-desc{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.active .paint-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 1s;
}

/*第3页，塑件页面*/
.active .plastic-desc{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.active .plastic-img{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 1s;
}
.active .plastic-details1{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 2s;
}
.active .plastic-circle1{
    transform-origin: 140px center;
    -webkit-animation: circle1-rota 5s 1 2s linear;
    -moz-animation: circle1-rota 5s 1 2s linear;
    -ms-animation: circle1-rota 5s 1 2s linear;
    animation: circle1-rota 5s 1 2s linear;
}
/*圆圈1转动动画效果*/
@-webkit-keyframes circle1-rota{
    0%{
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -moz-transform: rotate(360deg);
    }
}
@-moz-keyframes circle1-rota{
    0%{
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes circle1-rota{
    0%{
        opacity: 1;
        -ms-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes circle1-rota{
    0%{
        opacity: 1;
        -o-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -o-transform: rotate(360deg);
    }
}
@keyframes circle1-rota{
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        transform: rotate(360deg);
    }
}
.active .plastic-details2{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 2s;
}
.active .plastic-circle2{
    transform-origin: 112px center;
    -webkit-animation: circle2-rota 5s 1 2s linear;
    -moz-animation: circle2-rota 5s 1 2s linear;
    -ms-animation: circle2-rota 5s 1 2s linear;
    animation: circle2-rota 5s 1 2s linear;
}
/*圆圈2转动动画效果*/
@-webkit-keyframes circle2-rota{
    0%{
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -moz-transform: rotate(360deg);
    }
}
@-moz-keyframes circle2-rota{
    0%{
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes circle2-rota{
    0%{
        opacity: 1;
        -ms-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes circle2-rota{
    0%{
        opacity: 1;
        -o-transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        -o-transform: rotate(360deg);
    }
}
@keyframes circle2-rota{
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    100%{
        opacity: 0;
        transform: rotate(360deg);
    }
}
/*第4页，后车架页面*/
.active .r-frame-desc{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.active .r-frame-img{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 1s;
}
/*第5页，骑行页面*/
.active .cycling-desc {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 1s;
}
.active .cycling-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 2s;
}

/*次序一*/
.active .circle2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 3s;
}
/*次序二*/
.active .line1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 4s;
    transition-timing-function: linear
}
/*次序三*/
.active .circle3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 5s;
    transition-timing-function: linear
}
/*次序四*/
.active .line2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 6s;
    transition-timing-function: linear
}
/*次序五*/
.active .circle1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 7s;
    transition-timing-function: linear
}
/*次序六*/
.active .line3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 8s;
    transition-timing-function: linear
}

/*第6页，鞍座页面*/
.active .saddle-desc {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.active .saddle-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 1s;
}
/*第7页，减震页面*/
.active .shock-desc {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.active .shock-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 1s;
}

/*固定第七页*/
.fixed .shock-desc {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    transition-delay: 2s;
}
.fixed .shock-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 1s;
}
